1 of 38

REACT JS

​

Fb: @WWCodeManila

Twitter: @WWCodeManila

#WWCodeManila

2 of 38

https://github.com/wwcodemanila/WWCodeManila-React

3 of 38

Kim

Tech Lead

React

4 of 38

ABOUT

​

Women Who Code (WWCode) is a global non-profit organization dedicated to inspiring women to excel in technology careers. We work to support this generation of technology professionals in being and becoming leaders and role models in the tech industry.

5 of 38

OUR MISSION

​

Inspiring women to excel in technology careers.

OUR VISION

​

A world where women are representative as technical executives, founders, VCs, board members and software engineers.

6 of 38

STUDY GROUP

​

Study groups are events where members can come together and help each other learn and understand a specific programming language, technology, or anything related to coding, engineering, design.

7 of 38

WHO ARE WELCOME?

​

Everyone is welcome to the event as long as they want to learn and share their knowledge with the community and they following the code of conduct.

8 of 38

GUIDELINES

​

  • If you have a question, just ask
  • If you have an idea, share it
  • Make friends and learn from the other participants
  • Do not recruit or promote your business

9 of 38

ATTENDANCE

​

Please mark your in the study groups you are attending at

bit.ly/wwcodemanila

​

10 of 38

New Member’s Introduction

11 of 38

I am <name>

<your current profession>

<why react?>

12 of 38

SHOW & TELL

13 of 38

TOOLS

14 of 38

Tools

15 of 38

What is React?

16 of 38

Why React?

  • Everything is made of components which have a well-defined life cycle
  • React uses JSX which allows “writing HTML” with Javascript
  • Virtual DOM makes react faster

17 of 38

Virtual DOM

18 of 38

Page Setup

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>Hello World</title>

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

</head>

<body>

<div id="myDiv"></div>

<script type="text/babel">

​

<!-- React Code Goes Here -->

​

</script>

</body>

</html>

19 of 38

https://babeljs.io/

20 of 38

JSX

  • Is not HTML
  • Transpiled by Babel to be readable for most browsers
  • Makes your life easy

​

21 of 38

LET’S START BUILDING!

22 of 38

Getting Started

yarn global add create-react-app

cd hello-world

yarn start

yarn create react-app hello-world

Install create-react-app

Run the app

Create your hello-world app

23 of 38

24 of 38

package.json

{

"name": "hello-world",

"version": "0.1.0",

"private": true,

"dependencies": {

"react": "^16.2.0",

"react-dom": "^16.2.0",

"react-scripts": "1.1.1"

},

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test --env=jsdom",

"eject": "react-scripts eject"

}

}

​

​

25 of 38

index.js

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="theme-color" content="#000000">

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">

<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

<title>React App</title>

</head>

<body>

<noscript>

You need to enable JavaScript to run this app.

</noscript>

<div id="root"></div>

</body>

</html>

​

26 of 38

App.js, Component.js

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

​

class App extends Component {

render() {

return (

<div className="App">

<header className="App-header">

<img src={logo className="App-logo" alt="logo" />

<h1 className="App-title">Welcome to React</h1>

</header>

<p className="App-intro">

To get started, edit <code>src/App.js</code> and save to reload.

</p>

</div>

);

}

}

​

export default App;

​

​

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

​

const App = () => {

return (

<div className="App" onClick={someFunction}>

<header className="App-header">

<img src={logo className="App-logo" alt="logo" />

<h1 className="App-title">Welcome to React</h1>

</header>

<p className="App-intro">

To get started, edit <code>src/App.js</code> and save to reload.

</p>

</div>

);

}

​

export default App;

​

​

27 of 38

COMPONENTS, PROPS AND STATE

28 of 38

Components

  • Building blocks of React

29 of 38

Props

  • Properties inside a component that are passed in from somewhere

30 of 38

State

  • Affects how a component �behaves and renders
  • Can be updated via setState

31 of 38

Partner/Group/Individual Exercise

  1. Use create-react-app to make your digital bizcard
  2. Create a component and render it

32 of 38

Partner/Group/Individual Presentation

33 of 38

Assignment

34 of 38

References

35 of 38

T.I.L.

SHARE IT!

In front!

On Twitter: @wwcodemanila

Or FB: fb.com/wwcodemanila

​

Don’t forget to tag WWCodeManila so we can retweet or share it.�

36 of 38

Feedback Form

​

https://goo.gl/YzSqcS

​

​

​

If you have any feedback, please send it via the feedback form instead of posting it in our meetup group. This is very impt so we can improve the community. Thank you.

​

37 of 38

Gitter

​

https://gitter.im/WWCodeManila/JavaScript

​

​

​

If you need someone to talk to.

​

38 of 38

THANK YOU :)

​