Scribd
Upload
156 views

React JS

This document provides an overview of React JS including: 1) How to install React using common commands like npm init react-app. 2) The basic folder structure used in React projects with src for dynamic files and public for static files. 3) Guidelines for structuring components with files for CSS, JSX views, containers, and more.

Uploaded by

Test
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
156 views

React JS

This document provides an overview of React JS including: 1) How to install React using common commands like npm init react-app. 2) The basic folder structure used in React projects with src for dynamic files and public for static files. 3) Guidelines for structuring components with files for CSS, JSX views, containers, and more.

Uploaded by

Test
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

React JS

- Installation
npm init react-app my-app
npx create-react-app my-app
yarn create react-app my-app

npm start >> To execute project


npm build >> Create build of project in build folder

- Folder Structure
>> public is where your static files reside.
>> src is where your dynamic files reside.
If the file is imported by your JavaScript application or changes contents, put it here. In order to make
sure the client downloads the most up-to-date version of your file instead of relying on a cached copy,
Webpack will give changed files a unique file name in the production build. This allows you to use simple,
intuitive file names during development, such as banner.png instead of banner-2019-03-01-final.png. You
never have to worry about your client using the outdated cached copy, because Webpack will
automatically rename banner.png to banner.unique-hash.png, where the unique hash changes only when
banner.png changes.

STEPS
o Create assets/images inside src folder and move logo.svg inside it
o Create folder components/app inside src and move App.css, App.js, App.test.js inside it
o Further we can create src/helpers, src/packages, src/utils to add out repetable code
blocks here so that our cide can remain DRY (Don’t Repeat Yourself)

- Components can be further divided as below –

o component-name.css is a straight-forward CSS file imported by your stateless view


Component.
o component-name.scss is a straight-forward SASS file imported by your stateless view
Component.
o component-name-container.js is your business logic and state management as handled
before being sent to the stateless view Component.
o component-name-redux.js is the mapStateToProps, mapDispatchToProps, and connect
functionality of Redux. If you use an alternative global state management tool, give it a
similar file name, such as component-name-mobx.js. This allows you to harness multiple
global states (if necessary, though not recommended) and allows you to easily swap
global state managers in the future.
o component-name-styles.js is your JSS. I’ve used this file extensively for storing Material
UI withStyles HOCs and JSS.
o component-name-view.js is your stateless view Component. For the majority of cases,
this Component should be able to be pure functional Component (no hooks!).
o index.js is your entry point for importing your Component. It contains nothing but an
export statement that points to the topmost Component at any point in time, because
the topmost Component changes often during development.

- Sub-Component Directory Structure

- Routing
Dependencies required for routing –
React-router
react-router-dom

- Lifecycle
o componentWillMount is executed before rendering, on both the server and the client
side.
o componentDidMount is executed after the first render only on the client side. This is
where AJAX requests and DOM or state updates should occur. This method is also used
for integration with other JavaScript frameworks and any functions with delayed execution
such as setTimeout or setInterval. We are using it to update the state so we can trigger
the other lifecycle methods.
o componentWillReceiveProps is invoked as soon as the props are updated before
another render is called. We triggered it from setNewNumber when we updated the state.
o shouldComponentUpdate should return true or false value. This will determine if the
component will be updated or not. This is set to true by default. If you are sure that the
component doesn't need to render after state or props are updated, you can
return false value.
o componentWillUpdate is called just before rendering.
o componentDidUpdate is called just after rendering.
o componentWillUnmount is called after the component is unmounted from the dom. We
are unmounting our component in main.js.

You might also like