Monday 30 May 2016

Getting started with react

Setting up your first react application

1) Go to console and create your project folder
mkdir react-app
2) Got to react-app folder and type
npn init.
This step will ask for few information just keep on pressing enter and make edits if you want.

3) Now install the react libraries using npm.
npm install react-dom --save
This will install the two important react libraries which are required to run the application, -- save option add this dependencies to package.json

4) Now install the rest of libraries required.
npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react
This will install the babel transpiler which is needed to compile the ECMAScript 6 to ECMAScript 5 which is supported by most of the browsers.

Read more about it here-
https://www.quora.com/What-exactly-is-BabelJs-Why-does-it-understand-JSX-React-components

5) Now install the webpack server which will help in serving the application in development.
sudo npm install webpack webpack-dev-server -g
Read more about it here - https://www.quora.com/What-is-webpack

6) Create the basic files needed to run a basic hello world program
touch index.html App.js main.js webpack.config.js
7) Add this to your webpack.config.js

Read more about server configuration here-
https://github.com/webpack/docs/wiki/configuration

9) Now lets update the Add this to your index.html
10) Now lets update our main.js file with the following content.
11) Now lets add our first component. Add this to your app.js
12) Update your package.json file to add the script for starting the webpack server


13) Go to console and type
npm start
This will start the server in port 8085. 

No comments:

Post a Comment