Neoito — React 101
1 like128 views
The document provides a quickstart guide for using React, a JavaScript library for building HTML applications. It includes instructions for setting up a new React app, creating components, and managing state, as well as styling tips using Flexbox. Additionally, it mentions fetching data from an API and provides links to further resources for learning React.
Neoito — React 101
- 2. What is it ? A JavaScript library used to build html
- 3. Setup
- 4. Quickstart $ yarn global add create-react-app (or) $ npm install -g create-react-app
- 5. Boilerplate
- 6. Creating our react app $ cd ~/Projects $ create-react-app pok-homes $ cd pok-homes $ yarn start
- 7. Structure
- 8. Our first Component $ mkdir src/components $ touch src/components/hello.js
- 9. Anatomy of a component ● Import React ● Define component ● Implement render() ● export component
- 10. Components are dumb Pass data between components return <div>Hello {this.props.name}</div>;
- 11. Planning our App ● App ● Homes ● Map ● Marker
- 12. Flexbox <div class="app"> <div class="main"> <div class="search"> </div> <div class="homes"> </div> </div> <div class="map"> </div> </div> .homes { display: flex; flex-wrap: wrap; align-content: flex; } .home { flex-basis: calc(50% - 20px); margin: 10px; } .app { display: flex; } .main { flex-basis: 60%; display: flex; flex-direction: column; } .map { flex-grow: 1; height: 100vh; top: 0; position: sticky; }
- 13. React state & Component constructor constructor(props) { super(props); this.state = { ... }; }
- 14. Ajax componentDidMount() { ... } fetch('https://foo.bar/homes.json') .then(resp => resp.json()) .then(data => { console.log(data); });
- 16. Fin ● https://www.lewagon.com/blog/introduction-to-react-js ● https://www.youtube.com/watch?v=yZ0f1Apb5CU ● https://devhints.io/yarn Happy Hacking