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
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.
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
Hello World with ES6 and JSX
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.