All You Need To Know About CSS-in-JS – Hacker Noon

  • CSS-in-JS attached a style tag on top of the DOM while inline styles just attached the properties to the DOM node.Why does this matter?Not all CSS features can be aliased with JavaScript event handlers , many pseudo selectors aren’t possible, styling the html and body tags isn’t supported etc.With CSS-in-JS, you…
  • Some libraries (like jss, styled-components) even add support for neat, non-CSS-native features like nesting!Brilliant article going in depth on how they’re different.“Just write the darn CSS in CSS and be done with it.”Yes — while that’s the case for how it’s been done for a long-long time — the challenge is modern web is…
  • Shout-out to Vue for solving this problem beautifully even tho Vues styles have no access to components state.Here’s Bob Ross painting rocks to cool down the tension 😄What are the benefits of using CSS-in-JS?
  • CSS-in-JS leverages the full power of the JavaScript ecosystem to enhance CSS.“True rules isolation” — Scoped selectors are not enough.
  • JSS generates unique class names by default when it compiles JSON representation to CSS.Vendor Prefixing —The CSS rules are automatically vendor prefixed, so you don’t have to think about it.Code sharing — Easily share constants and functions between JS and CSS.Only the styles which are currently in use on your screen are…

TL;DR: Thinking in components — No longer do you have to maintain bunch of style-sheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity). You…
Continue reading “All You Need To Know About CSS-in-JS – Hacker Noon”

Full-stack React + GraphQL Tutorial – Apollo GraphQL

  • /App.css’;const ChannelsList = () = ul liChannel 1/li liChannel 2/li /ul;class App extends Component { render() { return ( div className=”App” div className=”App-header” img src={logo} className=”App-logo” alt=”logo” / h2Welcome to Apollo/h2 /div ChannelsList / /div ); } }export default App;create-react-app sets up hot reloading for you, so as soon as you save the file, the browser window with your app should update to reflect the changes:If it looks like this, you’re on the right track …3.
  • Let’s install Apollo Client and some helper packages that we’ll need to get GraphQL into our app: npm i -S react-apolloreact-apollo is a neat integration of Apollo Client with React that lets you decorate your components with a higher order component called graphql to get your GraphQL data into the component with zero effort.
  • Now with that, let’s add a few imports at the top of our App.js and create an instance of Apollo Client:import { ApolloClient, gql, graphql, ApolloProvider,} from ‘react-apollo’;const client = new ApolloClient();Next, we decorate the original ChannelsList with a GraphQL HOC that takes the query and passes the data to our component:const channelsListQuery = gql` query ChannelsListQuery { channels { id name } } `;const ChannelsListWithData = wrapped with the graphql higher order component, our ChannelsList component will receive a prop called data, which will contain channels when it’s available, or error when there is an error.
  • In addition data also contains a loading property, which is true when Apollo Client is still waiting for data to be fetched.We’ll modify our ChannelsList component to make sure the user knows if the component is loading, or if there has been an error:const ChannelsList = ({ data: {loading, error, channels }}) = { if (loading) { return pLoading …/p; } if (error) { return p{error.message}/p; } return ul { channels.map( ch = li key={ch.id}{ch.name}/li ) } /ul; };Finally, we have to replace the ChannelsList inside our App’s render function with ChannelsListWithData.
  • In order to make an instance of Apollo Client available to the component we just created, we also wrap our top-level app component with ApolloProvider, which puts an instance of the client on the UI.Your App component should now look like this:class App extends Component { render() { return ( ApolloProvider client={client} div className=”App” div className=”App-header” img src={logo} className=”App-logo” alt=”logo” / h2Welcome to Apollo/h2 /div ChannelsListWithData / /div /ApolloProvider ); } }Okay, we’re almost done!

GraphQL is a new API-definition and query language that has the potential to become the new REST. It makes it easy for UI components to declaratively fetch data without having to worry about backend…
Continue reading “Full-stack React + GraphQL Tutorial – Apollo GraphQL”