Intro to React
- 1. Introduction to React Zhenghui (Zheng) Wang Boston University DSC Boston University Developer Student Club
- 2. What is React? React is an open-source, front end, JavaScript library for building user interfaces or UI components.
- 3. AI Projects Showcase Prototypes & Solutions Solutions to Local Problems Practical Application What will we do? Machin e Learnin g Android iOS Workshops React Firebase UI/UX Git GCP
- 4. What will we make? React App (bu-dsc-chatroom-demo.web.app) At the end of this workshop series, we will have built an application like the one linked above. We will be using React and Google Firebase as our front-end/back-end technology.
- 6. What will you need? Tools Skills ● Your favorite text editor (VScode) ● Node.js LTE ○ npm (comes with Node.js) ● Programming experience ● Terminal navigation ● Some familiarity with JavaScript and HTML
- 7. Before we start... This little thing takes a while 1. In your favorite directory, run the following command in the terminal: npx create-react-app my-app
- 8. const name = 'Zheng'; const element = <h1>Hello, {name}</h1>; JSX is simply an syntax extension that allows you to write HTML and JavaScript together at the same time JSX
- 9. <div id="root"></div> const element = <h1>Hello, world</h1>; ReactDOM.render(element, document.getElementById('root')); To display an element, just call the ReactDom.render function Rendering Elements
- 10. function Welcome(props) { return <h1>Hello, {props.name}</h1>; } Components are just functions/classes that returns some element. Props are the arguments passed to the component. Components and Props
- 11. class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> </div> ); } } States States are like props, but is private and fully controlled by the component
- 12. <a onClick={handleClick}> Click me </a> function handleClick(e) { console.log('The element was clicked.'); } Event handling can be done through method implementations in the code Handling Events
- 13. Let’s Build Something! Interactive Tic-Tac-Toe 1. In your favorite directory, run the following command in the terminal: npx create-react-app my-app 2. Delete all files in the src/ folder of the new project (not the folder itself!)
- 14. Let’s Build Something! Interactive Tic-Tac-Toe 3. Add a file named index.css in the src/ folder with this code: https://pastebin.com/raw/jugYeS1Q 4. Add a file named index.js in the src/ folder with this code: https://pastebin.com/raw/Q3r2R1uf 5. Run npm start in the project folder and open http://localhost:3000
- 15. Now I should share my screen... Zhenghui (Zheng) Wang Boston University DSC Boston University Developer Student Club