ReactJs Setup

React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.

If you want to try ReactJs then

If you’re just interested in playing around with React, you can use CodePen. Try starting from this Hello World example code. You don’t need to install anything; you can just modify the code and see if it works.

If you prefer to use your own text editor, you can also download this HTML file, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don’t use it in production.

If you want to use it for a full application, there are two popular ways to get started with React: using Create React App, or adding it to an existing application.

How to create New ReactJs Application

Create React App is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 on your machine.

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses build tools like Babel and webpack under the hood but works with zero configuration.

Installing React

Use  npm for managing front-end dependencies

To install React with npm, run:

npm init
npm install --save react react-dom

How to enabling ES6 and JSX

We recommend using React with Babel to let you use ES6 and JSX in your JavaScript code. ES6 is a set of modern JavaScript features that make development easier, and JSX is an extension to the JavaScript language that works nicely with React.The Babel setup instructions explain how to configure Babel in many different build environments. Make sure you install babel-preset-react and babel-preset-env and enable them in your .babelrc configuration, and you’re good to go.

Hello World with ES6 and JSX

We recommend using a bundler like webpack or Browserify, so you can write modular code and bundle it together into small packages to optimize load time.

The smallest React example looks like this:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

This code renders into a DOM element with the id of root, so you need <div id="root"></div> somewhere in your HTML file.

Similarly, you can render a React component inside a DOM element somewhere inside your existing app is written with any other JavaScript UI library.

Leave a Reply

Your email address will not be published. Required fields are marked *