Intro to React – Christopher Hague – Medium

Intro to React  #learning #react #javascript #programming #learningtocode #reactjs

  • Here is another representation of how we can conceptualize our component hierarchy:- Application – Search Bar – Product Table – Category – ProductThe Trickle Down EffectHow does our application use each of the components to interact with one another?
  • In the same way that functions rely on arguments to operate on and manipulate data, components rely on props that are given as a they being declared.Using the example from above, it becomes easier to conceptualize how the Product and Category components are rendering the appropriate information onto the screen.
  • When the Product Table component is declared within the Application component, the Application will pass down this information related to all of the products to the Product Table as props.
  • As such, the Search Bar component will inherit a set of functions that define how the products in the API will be filtered based on the user input.The Category and Product components will then rely on the props passed down from Product Table to render the list of items, using the Search Bar component to filter the products based on the search terms and render only those products to the screen.
  • Conversely, if the search bar is empty then each product in the collection will be rendered.Divide and ConquerNow that we have some idea of how we want each of our components to function, let’s sketch each of them out below to get some idea of how the code for the app might look:class Category extends React.Component { // renders categories}class Product extends React.Component { // renders products}class ProductTable extends React.Component { // declares a Category and Product component, passing props to each of them Category category={product.category} key={product.category} / Product product={product} key={product.name} / // renders Category, Product}class SearchBar extends React.Component { // renders SearchBar // filters based on search terms}class Application extends React.Component { // renders SearchBar and ProductTable components, passing props to each of them SearchBar / ProductTable products={this.props.products} /}Now that we have all of our components defined, rendering the application to the screen becomes as simple as using the ReactDOM.render function and passing the Application component to it.ReactDOM.render( Application products={PRODUCTS} /,

React is a declarative, component-based JavaScript library used for building user interfaces. It was created by Facebook employee Jordan Walke and was first deployed on Facebook and Instagram in 2011…
Continue reading “Intro to React – Christopher Hague – Medium”

[React Native 016.3] Using GraphCool with React Native

Using @graphcool with @reactnative -  #reactNative #programming

  • The second screen is a screen to create a post, by passing the image URL and the post description.
  • The rest of the ListPage component is just a list showing each Post and its image.
  • Let’s use this mutation and create a new Post:

    Once we run this mutation, we can refresh our app and see this new Post we have created in our app.

  • On the inline code, we will put our code, it does a POST request to our slack, and we will pass the post description and image url.
  • Let’s save, that, open our slack and create a new Post in our App.

A serverless solution for GraphQL that works great with React Native
Continue reading “[React Native 016.3] Using GraphCool with React Native”

react + d3 = vx – vx code – Medium

react + d3 = vx - A new data visualization library for #reactjs by @hshoff

  • You just need to use d3 and magic dances across your screen.Of course, the last time you made a chart with d3 was 3 or was it 4 years ago?
  • “I wish there was something more like d3 I could use,” you say.Enter vxreact + d3 = vxMixing two ways to update the DOM is never a good time.
  • Me too.So I set out making a library of low-level components that could be used to build up reusable charts or those one-off requests or that special idea you had for a visualization that you’ve never seen done before.About vxGoal The goal is to create a library of components you can use to make both your own reusable chart library or your slick custom one-off chart.
  • If you’re creating your own awesome chart library on top of vx, it’s easy to create a component api that hides d3 entirely.
  • The vx collection of components lets you easily build your own reusable visualization charts or library without having to learn d3.

You’ve fallen in love with React. You’ve built a redux app. You’ve dabbled with GraphQL. You’ve started following along with Relay Modern and Apollo Client. But your next project is a dashboard that…
Continue reading “react + d3 = vx – vx code – Medium”

react + d3 = vx – Harrison Shoff – Medium

#ReactJS + #d3 = vx: A new open source library for building visualizations with React

  • You just need to use d3 and magic dances across your screen.Of course, the last time you made a chart with d3 was 3 or was it 4 years ago?
  • “I wish there was something more like d3 I could use,” you say.Enter vxreact + d3 = vxMixing two ways to update the DOM is never a good time.
  • Me too.So I set out making a library of low-level components that could be used to build up reusable charts or those one-off requests or that special idea you had for a visualization that you’ve never seen done before.About vxGoal The goal is to create a library of components you can use to make both your own reusable chart library or your slick custom one-off chart.
  • If you’re creating your own awesome chart library on top of vx, it’s easy to create a component api that hides d3 entirely.
  • The vx collection of components lets you easily build your own reusable visualization charts or library without having to learn d3.

You’ve fallen in love with React. You’ve built a redux app. You’ve dabbled with GraphQL. You’ve started following along with Relay Modern and Apollo Client. But your next project is a dashboard that…
Continue reading “react + d3 = vx – Harrison Shoff – Medium”

Getting Started with React Navigation, the Navigation Solution for React Native

Getting Started with React Navigation, a navigation solution for React Native:

  • I’ve used React Native since the very early days of it being opened sourced and have tried many solutions, this has been my navigator progression…NavigatorIOS Navigator react-native-router-flux NavigationExperimental or ex-navigation (depending on navigation requirements)Each upgrade took time to refactor and introduce a new, slightly different, pattern for navigation and managing navigation state.Fortunately, we’ve now got a single “official” solution to navigation in React Native with react-navigation.
  • The TabNavigator takes an object and each key/value pair is going to represent a tab.You can see that we then pass a screen to each tab—this will be the component that should be rendered when that tab is active.The last thing we need to do is use the Tabs navigator in our app entry point.
  • We can then replace the Feed screen definition in the TabNavigator with our new stack.I didn’t mention it before but in React Navigation, in addition to accepting components for the screen, it accepts other navigation stacks to display for a screen.
  • It, like the navigate function, is available on I’m pulling all the data to generate the UserDetail.js screen like thisModalThe final thing I want to cover in this tutorial is how to create a modal with React Navigation.
  • In addition to the mode, which I described above, we have headerMode which tells the StackNavigator to not display a navigation bar for this stack — we’ll let the children navigators do that.To keep a consistent interface and to show that you can nest a StackNavigator in a StackNavigator we’ll build one for the settings screen as well.Finally, we’ll want to tell the app entry point to use our new Root navigator instead of the Tabs.All of this leaves us with the followingRemember, all of this code is available on Github and I encourage you to check it out as well as the react navigation docs.

If you’ve worked with React Native for any amount of time you’ve likely been confused by how you navigate in your app (practices, packages, etc). I’ve used React Native since the very early days of…
Continue reading “Getting Started with React Navigation, the Navigation Solution for React Native”

Get the Dimensions of a React Native Phone Screen

Get the dimensions of a #ReactJS Native phone screen:

  • Your link to unlock this lesson will be sent to this email address.
  • In the lesson we’ll use Dimensions to get the width and height of the screen.
  • Member comments are a way for PRO Members to communicate, interact, and ask questions about a lesson.
  • 1:10 React lesson by Jason Brown
  • Unlock this lesson and all 704 of the free egghead.io lessons, plus get React content delivered directly to your inbox!

In this lesson we’ll use Dimensions to get the width and height of the screen. Also we’ll use onLayout to detect orientation changes.
Continue reading “Get the Dimensions of a React Native Phone Screen”